<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.technicianName" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-select v-model="query.state" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="toAddURL"
        >
            新增
        </el-button>
        <el-button
          type="danger"
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="toQuery"
        >刷新</el-button>
      </div>
    </div>
    <!--表单组件-->
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
      <el-table-column ref="table" label="技师头像">
        <template slot-scope="scope">

          <!-- <a :href="scope.row.technicianAvatar" style="color: #42b983" target="_blank"><el-avatar  :size="60" fit="scale-down" :src="scope.row.technicianAvatar"></el-avatar></a> -->
          <a :href="scope.row.technicianAvatar" style="color: #42b983" target="_blank"><img :src="scope.row.technicianAvatar" width="60px"   alt=""></a>
        </template>
      </el-table-column>
      <el-table-column prop="technicianName" label="技师名称" />

      <!-- <el-table-column prop="phone" label="联系方式" /> -->
      <!-- <el-table-column prop="introduction" label="商家简介" /> -->
      <el-table-column label="详细地址"  min-width="160" align="center">
        <template slot-scope="scope">
          <div >
            {{ scope.row.address}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" />

      <el-table-column prop="longitude" label="经度" />
      <el-table-column prop="latitude" label="纬度" />
      <!-- <el-table-column prop="type" /> -->
      <el-table-column label="行业" align="center">
        <template slot-scope="scope">
          <div>
            {{ typeEcho(scope.row.type) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="是否需要出行费用" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.isTravelExpense != 1" style="cursor: pointer" :type="''">是</el-tag>
            <el-tag v-else style="cursor: pointer" :type=" 'info' ">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag :type="stateList.find(item=>item.state==scope.row.state).type">
            <!-- {{ scope.row.state==1?'待审核':scope.row.state==3?'已通过':'已拒绝' }} -->
            {{ stateList.find(item=>item.state==scope.row.state).text }}
            </el-tag>
            <!-- <el-tag v-if="scope.row.isShow === 1" style="cursor: pointer" :type="''">显示</el-tag>
            <el-tag v-else style="cursor: pointer" :type=" 'info' ">不显示</el-tag> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="650px" align="center">


        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-user-solid"
            :disabled="scope.row.state!=1"
            @click="examine(scope.row)"
           >
          审核
        </el-button>
        <el-button
            size="mini"
            icon="el-icon-zoom-in"
            @click="look(scope.row.id)"
          >
            查看
          </el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="toUpdateURL(scope.row.id)"
          >
            编辑
          </el-button>
          <el-popover
            :ref="scope.row.id"
            placement="top"
            width="180"
          >
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
          </el-popover>
          <el-button
            size="mini"
            type="info"
            icon="el-icon-user-solid"
            @click="skipMerchant(scope.row)"
           >
          跳转项目
        </el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="700px"

      >
      <el-form  ref="formValidate"  :model="form" label-width="130px" >
        <el-row :gutter="24">
          <!-- 商家信息-->

          <el-col :span="24">
            <el-form-item label="审核结果:" >
              <el-radio-group v-model="form.state">
                <el-radio :label="2">通过</el-radio>
                <el-radio :label="-1">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.state==3">
            <el-form-item label="审核建议">
              <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入拒绝建议" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="examineResult()">确 定</el-button>
      </span>
    </el-dialog>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { examine ,deleteStore,yxTechnicianCategory } from '@/api/technician'
import singlePic from '@/components/singlematerial'
import MaterialList from '@/components/material'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
export default {
  components: {  Treeselect,singlePic ,MaterialList},
  mixins: [initData],
  data() {
    return {
      dropDownValue: '',
      dialogVisible: false,
      delLoading: false,
      visible: false,
      id:'',
      uid: '',
      options: [{
          value: '3',
          label: '已通过'
        }, {
          value: '1',
          label: '待审核'
        }, {
          value: '-1',
          label: '已拒绝'
        }],
      form:{
        state:2,
        remark:''
      },
      queryTypeOptions: [
        { key: 'storeName', display_name: '商品名称' },

      ],
      cateId: null,
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      optionsArr:[],
      stateList:[
        {
          state:1,
          text:'待审核',
          type:'warning'
        },
        {
          state:2,
          text:'已通过',
          type:'success'

        },
        {
          state:-1,
          text:'已拒绝',
          type:'danger'

        },
        {
          state:3,
          text:'营业中',
          type:''

        },
        {
          state:4,
          text:'休息中',
          type:'info'

        },
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },

  mounted () {
    yxTechnicianCategory().then(res=>{
      this.optionsArr=res.content


      console.log('res.content',res.content)
    })
  },
  methods: {

    typeEcho(pid) {
      let str
      this.optionsArr.forEach((item) => {
        if (item.children.length>0) {
            item.children.forEach((item1)=>{
          if (item1.id==pid) {
            str= item1.cateName
          }
        })
        }
      });
      return str
    },
    gain(uid){
      code({
        uid,
        path:'paymentPack/pages/payment/index'
      }).then(res=>{
        // this.data[index].gain=res.data
        // console.log('this.data', this.data,index,this.data[index],this.data[index].gain)
        this.init()
      })
    },
    skipMerchant(row){
      this.$router.push({
        name:'project',
        params:{
          id: row.id,
          technicianName: row.technicianName
        }
      })
    },
    //状态审核
    examineResult(){
      let params={
        id:this.id,
        uid: this.uid,
        ...this.form
      }
      params.remark=params.state==2?'':params.remark
      console.log(params)
      examine(params).then(res=>{
        this.dialogVisible=false
        this.toQuery()
      })
    },
    //打开审核弹框
    examine(data){
      console.log(data)
      this.dialogVisible=true
      this.id=data.id
      this.uid = data.uid
      console.log(this.uid)
    },
    //跳转新增修改
    toAddURL(){
      this.$router.push({ name: 'addTechnician' })
    },
    //跳转修改商品页
    toUpdateURL(id){
      // let data=JSON.stringify(row)
      this.$router.push( { path:'/HomeService/edit/'+id})

      // this.$router.push({name:'businessEdit',query:{id}})
    },
    //查看
    look(id){
      this.$router.push( { path:'/HomeService/look/'+id})

    },
    ChannelMergerNode(){
      console.log("value",this.cateId)
    },
    recursion(arr){
      let content=[]
      arr.forEach(item => {
        let obj={}
        obj.cateName='|-----'+item.cateName
        obj.id=item.id
        content.push(obj)
        if (item.children&&item.children.length>0) {
          item.children.forEach(item1=>{
            let obj1={}
            obj1.cateName='|-----|-----'+item1.cateName
            obj1.id=item1.id
            content.push(obj1)
          })
        }
      });
      return content
    },

    checkPermission,
    beforeInit() {
      this.url = 'api/yxTechnician'
      const sort = 'id,desc'
      this.params = { page: this.page , size: this.size, sort: sort }
      if (this.cateId!=null&&this.cateId!='') {
        this.params.cateId=this.cateId
      }
      const query = this.query
      const type = query.type
      const value = query.name
      if (type && value) { this.params[type] = value }
      return true
    },
    subDelete(id) {
      this.delLoading = true
      let params={}
      params.ids=[id]
      deleteStore(params).then(res => {
        this.delLoading = false
        // this.$refs[id].doClose()
        this.dleChangePage()
        this.init()
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 2500
        })
      }).catch(err => {
        this.delLoading = false
        this.$refs[id].doClose()
        console.log(err.response.data.message)
      })
    },

  }
}
</script>

<style scoped>

</style>
